<template>
	<div class="cursor-pointer flex justify-between items-center bg-bg-3 rounded-[6px] px-5 py-4">
		<div class="flex flex-col gap-2">
			<p class="bg-success px-1 py-[4px] rounded-[6px] w-fit text-white">
				{{ title }}
			</p>
			<p class="text-t-1">{{ $t(ActivityRewardType[type].name) }}</p>
		</div>
		<up-amount :value="amount" class="text-xl text-t-2" />
	</div>
</template>

<script setup lang="ts">
import { UpAmount } from '@/components/up'
import { ActivityRewardType } from '@/enums/activity-reward-type.ts'

defineProps({
	title: {
		type: String,
		default: ''
	},
	type: {
		type: String,
		default: ''
	},
	amount: {
		type: [String, Number],
		default: ''
	}
})
</script>

<style scoped></style>
